import { Button, Divider, Space, Table, Tabs } from "antd";
import cm from "classnames";
import { useState } from "react";
import { tableDatas } from "../MyOrder/mockData";
import style from "./index.less";
const AfterSales = () => {
  const items = [
    {
      key: "1",
      label: "退款",
    },
    {
      key: "2",
      label: "售后",
    },
  ];

  const columns = [
    {
      title: "订单详情",
      dataIndex: "goodsList",
      key: "name",
      width: 500,
      render: (_, item: any) => (
        <>
          {item?.goodsList?.map((it, index) => {
            return (
              <div className={cm(style.goods)} key={index}>
                <div
                  className={cm(
                    "managerRow",
                    "managerCenterH",
                    style.goodsTitle,
                    "managerSpread"
                  )}
                >
                  <span>2025-02-04 12:00:00</span>
                  <span>订单编号：123456</span>
                </div>
                <div
                  className={cm("managerColumn")}
                  style={{ marginTop: "10px" }}
                >
                  <div
                    className={cm("managerRow", "managerSpread")}
                    style={{ width: "100%" }}
                  >
                    <img
                      src="https://gyxs.oss-cn-chengdu.aliyuncs.com/gyxs/20250421094833.jpg"
                      alt=""
                      style={{ width: "50px", height: "50px" }}
                    />
                    <div
                      className={cm(
                        "managerRow",
                        "managerCenterH",
                        "managerSpread",
                        style.goodsConter
                      )}
                    >
                      <span className={cm(style.goodsTitles)}>{it.name}</span>
                      <span>x200</span>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </>
      ),
    },
    {
      title: "收货人",
      dataIndex: "age",
      key: "age",
    },
    {
      title: "订单金额",
      dataIndex: "address",
      key: "address",
    },
    {
      title: "交易方式",
      dataIndex: "address",
      key: "address",
    },
    {
      title: "订单状态",
      dataIndex: "address",
      key: "address",
    },
    {
      title: "操作",
      dataIndex: "address",
      key: "address",
      render: (_, item: any) => (
        <Space>
          {item.orderStatus == "REFUND" && (
            <Space>
              <Button type="primary">退款/售后</Button>
            </Space>
          )}
          {item.orderStatus == "AFTER_SALES" && (
            <Space>
              <Button type="primary">申请售后</Button>

            </Space>
          )}
        </Space>
      ),
    },
  ];

  const [pagination, setPagination] = useState<any>({
    total: 0,
    pageSize: 10,
    current: 1,
    pageSizeChangeResetCurrent: true,
  });
  const onChange = (activeKey: any) => {
    console.log(activeKey);
  };
  return (
    <div className={cm(style.orderStyle)}>
      <Divider style={{ borderColor: "#7cb305" }} orientation="start">
        退款/售后
      </Divider>
      <div className={cm(style.conter)}>
        <Tabs items={items} onChange={onChange} />
        <div className={cm(style.table)}>
          <Table
            dataSource={tableDatas}
            columns={columns}
            pagination={{ ...pagination }}
            onChange={(pagination: any) => {
              console.log(pagination, "=-======。pagination");
              // setParamsData({ ...paramsData, pageNum: pagination.current, pageSize: pagination.pageSize })
              setPagination({ ...pagination });
            }}
          />
        </div>
      </div>
    </div>
  );
};

export default AfterSales;
